<template>
  <div>
    <div>
      <van-nav-bar
          title="充值记录"
          left-arrow
          @click-left="onClickLeft"
      />
    </div>
    <!--    在这个-->
    <div v-for="(item,key) in topup" :key="key">
      <!--      盒子里面v-for数据即可-->
      <div class="topup">
        <div class="topupmonth">
          <span class="month">{{key|formatTimer}}月</span>
          <span class="topupmoney1">充值成功 {{item.sum.toFixed(2)}}</span>
        </div>
        <div class="topuprecord" v-for="(item1,key1) in item" :key="key1" @click="gotopupdetail(item1.id)">
          <span class="topupicon"><van-icon name="gold-coin-o" color="#a4acb7" size="3rem" /></span>
          <span class="topupway">{{item1.rechargeChannels==1 ? '微信支付' : (item1.rechargeChannels==2 ? '支付宝支付' : '贝宝支付')}}</span>
          <span class="topupdate">{{item1.createTime|formatTimer1}}</span>
          <span class="topupmoney2">{{item1.rechargeAmount}}₱</span>
          <span class="topupstate">{{item1.status==1?'充值中':(item1.status==2?'待支付':(item1.status==3?'充值成功':(item1.status==4?'交易关闭':'充值失败')))}}</span>
        </div>
      </div>
    </div>
    <br>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      topup:[],
      sum:0,
      registerIp:''
    }
  },
  mounted() {
    let parse = JSON.parse(localStorage.getItem('login'));
    this.registerIp=parse.registerIp
    this.getTopupList()
  },
  filters: {
    formatTimer: function(value) {
      let date = new Date(value);
      let y = date.getFullYear();
      let MM = date.getMonth() + 1;
      MM = MM < 10 ? "0" + MM : MM;
      let d = date.getDate();
      d = d < 10 ? "0" + d : d;
      let h = date.getHours();
      h = h < 10 ? "0" + h : h;
      let m = date.getMinutes();
      m = m < 10 ? "0" + m : m;
      let s = date.getSeconds();
      s = s < 10 ? "0" + s : s;
      return  MM ;
    },
    formatTimer1: function(value) {
      let date = new Date(value);
      let y = date.getFullYear();
      let MM = date.getMonth() + 1;
      MM = MM < 10 ? "0" + MM : MM;
      let d = date.getDate();
      d = d < 10 ? "0" + d : d;
      let h = date.getHours();
      h = h < 10 ? "0" + h : h;
      let m = date.getMinutes();
      m = m < 10 ? "0" + m : m;
      let s = date.getSeconds();
      s = s < 10 ? "0" + s : s;
      return y + "-" + MM + "-" + d + " " + h + ":" + m;
    }
  },
  methods: {
    // 跳转充值页面
    onClickLeft() {
      this.$router.push({
        path: '/topup'
      })
    },
    // 跳转充值详情页面
    gotopupdetail(id){
      this.$router.push({
        path: '/topupdetail',
        query:{
          id:id
        }
      })
    },
    // 跳转充值提示页面
    gotopuphint(){
      this.$router.push({
        path: '/topuphint'
      })
    },
    // 查询所有充值记录
    getTopupList(){
      axios.get('http://localhost:11219/mine/topup/gettopuplist/'+this.registerIp).then(res=>{
        console.log(res)
        this.topup=res.data.map;
        if(this.topup==null){
          this.$toast('暂无充值记录');
        }else{
          for(let key in this.topup){
            for (let i = 0; i < this.topup[key].length; i++) {
              if(this.topup[key][i].status==3){
                this.sum+=this.topup[key][i].actualPayment
              }
            }
            this.topup[key].sum=this.sum
            this.sum=0
          }
        }
      })
    }
  }
}
</script>

<style scoped>
.topup{
  width: 100%;
  height: 100%;
}
.topup .topupmonth{
  width: 100%;
  height: 55px;
}
.topupmonth .month{
  float: left;
  margin: 10px;
}
.topupmonth .topupmoney1{
  float: left;
  margin-top: 30px;
  margin-left: -42px;
  font-size: 12px;
  color: #a4acb7;
}
.topup .topuprecord{
  width: 100%;
  height: 70px;
  background-color:white;
}
.topupicon{
  float: left;
  margin: 10px 5px;
}
.topuprecord .topupway{
  width: 100px;
  text-align: left;
  float: left;
  margin-top: 10px;
}
.topuprecord .topupdate{
  float: left;
  margin-top: 40px;
  margin-left: -100px;
  font-size: 12px;
  color: #a4acb7;
}
.topuprecord .topupmoney2{
  width: 100px;
  text-align: right;
  float: right;
  margin-top: 10px;
  margin-right: 10px;
}
.topuprecord .topupstate{
  width: 50px;
  float: right;
  text-align: right;
  margin-top: 40px;
  margin-right: -100px;
  font-size: 12px;
  color: #a4acb7;
}
</style>
